@form-prefix: ~"@{prefix}form";
@form-label-padding: (@input-height - @font-size-mini)/2;

.form-content-width100 {
  input[type='text'],
  input[type='password'],
  input[type='number'],
  textarea,
  .@{prefix}input,
  .@{prefix}select,
  .@{prefix}taginput,
  .@{prefix}autocomplete,
  .@{prefix}numberinput,
  .@{prefix}datetime-input-border,
  .@{prefix}input-group {
    width: 100%;
  }

  .@{prefix}radio,
  .@{prefix}checkbox{
    >label{
      height: @input-height;
      line-height: @input-height;
    }
  }
}

.@{form-prefix} {
  .h-func-clearfix();
  .@{form-prefix} {
    &-item {
      padding-bottom: @input-height - 6px;
      
      &-no-padding{
        padding-bottom: 0px;
      }
      position: relative;
      &-label {
        display: inline-block;
        text-align: right;
        font-size: @font-size-mini;
        color: @dark1-color;
        line-height: 1;
        padding: @form-label-padding 15px @form-label-padding 0;
        box-sizing: border-box;
      }
      &-required {
        .@{form-prefix}-item-label::before {
          content: "*";
          color: @red-color;
          font-size: 15px;
          display: inline-block;
          margin-right: 4px;
          line-height: 8px;
          vertical-align: middle;
        }
      }
      &-content {
        // line-height: 32px;
        font-size: @font-size-mini;
        .form-content-width100();
      }
      &-wrap {
        position: relative;
        .h-func-clearfix();
      }
      &-error {
        position: absolute;
        margin-top: 5px;
        color: @red-color;
        line-height: 1;
      }
    }
  }
  &.@{form-prefix} {
    &-label {
      &-left {
        .@{form-prefix}-item-label {
          text-align: left;
          padding: @form-label-padding 0 @form-label-padding 15px ;
        }

        .@{form-prefix}-item-required {
          .@{form-prefix}-item-label {
            &:before {
              position: absolute;
              top: (@input-height)/2 - 2px;
              left: 6px;
            }
          }
        }
      }
    }
    &-block .@{form-prefix}-item,
    .@{form-prefix}-item-block {
      .h-func-clearfix();
      &-label {
        display: block;
        text-align: left;
        padding-left: 0;
        &:empty {
          display: none;
        }
      }
      &-content {
        .h-func-clearfix();
        // .form-content-width100();
      }
    }
    &-inline .@{form-prefix}-item {
      display: inline-block;
      &-label {
        float: left;
      }
      &-content {
        float: left;
        margin-right: 20px;
      }
    }
    &-twocolumn .@{form-prefix}-item {
      width: 50%;
      float: left;
      &-label {
        width: 80px;
        float: left;
      }
    }
    &-threecolumn .@{form-prefix}-item {
      width: 33.3%;
      float: left;
      &-label {
        width: 80px;
        float: left;
      }
    }
    &-single .@{form-prefix}-item,
    .@{form-prefix}-item-single {
      width: 100%;
      .h-func-clearfix();
      .@{form-prefix}-item-label {
        width: 80px;
        float: left;
      }
      .@{form-prefix}-item-content {
        margin-left: 80px;
      }
    }
  }

  &-readonly &-item{
    padding-bottom: 3px;
    .@{form-prefix}-item-wrap{
      line-height: @input-height;
    }
  }

  &-item{
    &-readonly &-content{
      line-height: @input-height;
    }
  }
}
